<template>
    <div>
      <ul class="entry-new">
          <li v-for="(item, index) in  list" :key="index" v-if="index<=9">
              <router-link tag="a" :to="{path:'/detail/',query:{'typeId':item.typeId, 'newsId':item.newsId}}" >
                  <span class="timeSet">{{item.createDate | formatDate}}</span>&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>&nbsp;&nbsp;{{item.title | fontSize}}
              </router-link>
          </li>
      </ul>
    </div>
</template>

<script>
    import {tool} from '../tool/index';
    export default {
        name: "entry",
        props:{
          list: Array
        },
        filters:{
            formatDate(val) {
                const value=new Date(val);
                const year=value.getFullYear();
                const month= tool.padDate(value.getMonth()+1);
                const day = tool.padDate(value.getDate());
                const hour = tool.padDate(value.getHours());
                const minutes = tool.padDate(value.getMinutes());
                const seconds = tool.padDate(value.getSeconds());
                return `${year}-${month}-${day}`;
            },
            fontSize(title){
                if(title.length>=50){
                    return `${title.slice(0, 45)}...`
                } else {
                    return title
                }
            },
        }
    }
</script>

<style lang="less" scoped>

            ul{
                &.entry-new{
                    border-radius: 5px;
                    border: 1px solid #eee;
                    padding: 30px;
                    height: 480px;
                    li{
                        line-height: 40px;
                        border-bottom: 1px dashed #eee;
                        span{
                            &.timeSet{
                                float: right;
                            }
                        }
                        a{
                            text-decoration: none;
                            color: black;
                            &:hover{
                                color: #009688;
                            }
                        }
                    }
                }
            }
            .el-pagination{
                margin-top: 20px;
            }

</style>
